// component/ui/z-checkboxs/z-checkboxs.js
import {
  _toArray,
  _isWhatType
} from '../common/utils';
const customFormControls = require('../common/custom-form-controls')
const path = '../z-checkbox/z-checkbox'
const formPath = '../z-form-popup/z-form-popup'

Component({
  behaviors: [customFormControls],
  relations: {
    [path]: {
      type: 'descendant',
      linked: function (target) {
        this.updateChild(target)
      },
      linkChanged: function (target) {},
      unlinked: function (target) {}
    },
    [formPath]: {
      type: 'ancestor',
      linked(target) {},
      linkChanged(target) {},
      unlinked(target) {},
    },
  },
  /**
   * 组件的属性列表
   */
  properties: {
    max: {
      type: Number,
      value: 0,
    },
    value: {
      type: Array,
      value: [],
    },
    defaultValue: {
      type: Array,
      value: [],
    },
    prop: {
      type: String,
      value: '',
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    _isFormCuttent: false,
    current: [],
  },

  /**
   * 组件的数据监听
   */
  observers: {
    value(val) {
      if (_isWhatType(val) !== 'Object') {
        this.data._isFormCuttent = true
      }
      this.updateChildren(val)
    }
  },

  /**
   * 组件的生命周期
   */
  lifetimes: {
    created() {
      Object.defineProperty(this, 'children', {
        get: () => this.getRelationNodes(path) || [],
      });
      Object.defineProperty(this, 'parent', {
        get: () => this.getRelationNodes(formPath)[0],
      });
    },
    attached() {},
    detached() {},
  },

  /**
   * 组件的方法列表
   */
  methods: {
    updateChildren(val) {
      this.setData({
        current: val.map(key => String(key)),
      });
      (this.children || []).forEach((child) => child.updateActive());
    },
    updateChild(child) {
      child.updateActive()
    },
    switch (name, isActive) {
      const {
        max,
        current,
        prop
      } = this.data;
      if (isActive) {
        if (max && current.length >= max) {
          return
        }
        name = (current || []).concat(name)
      } else {
        name = (current || []).filter((activeName) => activeName !== name);
      }
      if (this.parent && prop) {
        this.data._isFormCuttent = true
        this.updateChildren(name)
        this.parent && this.parent.onClear(this, prop)
      } else {
        this.triggerEvent('change', name);
      }
    },
    onConfirm() {
      const {
        prop,
        current,
        _isFormCuttent
      } = this.data;
      if (!_isFormCuttent) return;
      let title = (this.children || []).filter((child) => child.data.isActive).map((item) => item.data.title);
      (this.parent || {}).data._form[prop] = current;
      (this.parent || {}).data._label[prop] = title.join(' ');
    },
    onReset() {
      const {
        defaultValue = []
      } = this.data
      if (defaultValue && defaultValue.length) {
        this.updateChildren(defaultValue)
      } else {
        this.updateChildren([])
      }
    },
    onClear() {
      this.data._isFormCuttent = false
      this.updateChildren([])
    },
  }
})